<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/cssreset.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="js/iconfont.js"></script>
</head>
<body>
<!--头部-->
<header class="top">
    <div class="container top_logoAndlogin" id="langAndlogin">
        <div class="top_logo col-md-4 col-sm-4 col-xs-12">
            <img src="images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt="">
        </div>
        <div class="top_login col-md-8 col-sm-8 col-xs-12">
            <ul>
                <li class="uk">
                    <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                    <ol class="changelang">
                        <li><a href=""><span class="ico_one"></span>ireland</a></li>
                        <li><a href=""><span class="ico_two"></span>nederland</a></li>
                    </ol>
                </li>
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <a href="html/login.html" class="logincss">login</a>
                </li>
            </ul>
        </div>
    </div>
<!--导航栏-->
    <nav class="container header_nav" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="images/e93962cbac2ca6e4a95331f925a7b32d9127465b.svg" alt="">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar">一</span>
                    <span class="icon-bar">一</span>
                    <span class="icon-bar">一</span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <!-- navbar-default灰色 navbar-fixed-bottom变成底部栏 -->
                <ul class="nav_left nav navbar-nav">
                    <!-- 鼠标移动颜色会发生变化 -->
                    <!-- active：在Home这里加了一个默认状态 -->
                    <li class="active">
                        <a href="#">subscribe</a>
                    </li>
                    <li><a href="html/shop.html">shop</a></li>
                    <li><a href="html/about_us.html">about</a></li>
                    <li><a href="html/UK_help.html">help</a></li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liwu"></use>
                            </svg>
                            rewards
                        </a>
                    </li>
                    <li class="uk lang">
                        <p><a href=""><span></span>uk<b class="caret"></b></a></p>
                        <ol class="changelang">
                            <li><a href=""><span class="ico_one"></span>ireland</a></li>
                            <li><a href=""><span class="ico_two"></span>nederland</a></li>
                        </ol>
                    </li>
                    <li class="login">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yonghu"></use>
                        </svg>
                        <a href="html/login.html" class="logincss">login</a>
                    </li>
                    <li id="startbtn">
                        <button class="btn btn-success">get started ></button>
                    </li>
                </ul>
                <div class="nav_right">
                    <button class="btn btn-success">get started ></button>
                </div>
            </div>
        </div>
    </nav>
</header>

<!--轮播+促销策略-->
<div class="banner col-md-12 col-sm-12 col-xs-12">
    <div class="carousel_img"></div>
    <div class="banner_cont">
        <h3>first box half price (usually £4.49)</h3>
        <div>
            <h3>delicious and wholesome snacks, imagine that</h3>
            <p>Looking for tasty, nutritious snacks for busy days? Welcome to graze. We're reimagining the way you snack with tasty graze ideas you can feel good about.</p>
            <button class="btn btn-success">get started ></button>
            <br>
            <a href=""><span></span>have a special code?</a>
        </div>
    </div>
</div>

<!--白色区域所有内容.pro-->
<div class="con container">
    <div class="works col-md-12 col-sm-12 col-xs-12">
        <h2>how it works</h2>
        <ul class="con_img">
            <li class="col-md-4 col-sm-4 col-xs-12">
                <img src="images/how-it-works-1.png" alt="">
                <p>Create your account and tell us what you like.</p>
            </li>
            <li class="col-md-4 col-sm-4 col-xs-12">
                <img src="images/how-it-works-2.png" alt="">
                <p>We tailor your box and deliver it for free.</p>
            </li>
            <li class="col-md-4 col-sm-4 col-xs-12">
                <img src="images/how-it-works-3.png" alt="">
                <p>Give us your verdict to help us make even better snacks.</p>
            </li>
        </ul>
    </div>

    <div class="article">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="images/homepage-1.jpg" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>flavours with benefits</h2>
                <p>At graze we believe the healthy choice shouldn't be a compromise on taste! We've found that using the best ingredients nature has to offer makes the best snack, and we've got many delicious, wholesome creations for you to look forward to.</p>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="images/homepage-2.gif" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>always new snacks to trys</h2>
                <p>We're on a never-ending hunt for healthier, juicier, crunchier, tastier, fresher, bigger, better! Which basically means we're always refreshing, rethinking and reinventing, so you can upgrade the way you snack!</p>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <img src="images/homepage-3.jpg" alt="" class="article_left col-md-5 col-sm-5 col-xs-12">
            <div class="article_right col-md-6 col-sm-6 col-xs-12">
                <h2>tailored to your tastes</h2>
                <p>Imagine having taste experts on hand to select snacks for you! With a graze subscription you'll do exactly that, all you have to do is tell us what you like and we'll tailor the flavours of each box to suit you.</p>
            </div>
        </div>
    </div>

    <div class="join_cont col-md-12 col-sm-12 col-xs-12">
        <h2>join thousands of grazers who love their graze box</h2>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <p>"I absolutely love these graze snack boxes. I look forward to them coming every fortnight. Great value for money and lots of different flavours to try."</p>
            <p>Katrina</p>
            <img src="images/trustpilot-5-stars.svg" alt="">
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <p>"The most convenient, easiest, NICEST snacks I've ever had. Delivered to your door without having to go to the shops and every time it is something different!"</p>
            <p>Jo</p>
            <img src="images/trustpilot-5-stars.svg" alt="">
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <p>"Perfect for snacking. And so many choices. Would recommend if you fancy something better for snacking than crisps."</p>
            <p>David</p>
            <img src="images/trustpilot-5-stars.svg" alt="">
        </div>
    </div>

    <p class="trustpilot col-md-12 col-sm-12 col-xs-12"><img src="images/trustpilot.svg" alt=""></p>

    <div class="ready col-md-12 col-sm-12 col-xs-12">
        <img src="images/homepage-section-4.jpg" alt="" class="ready_left col-md-6 col-sm-6 col-xs-12">
        <div class="ready_right col-md-6 col-sm-6 col-xs-12">
            <h2>ready to reimagine snacking?</h2>
            <button class="btn btn-success btn-lg">get started ></button>
         </div>
    </div>
</div>

<footer class="container col-md-12 col-sm-12 col-xs-12">
    <p class="svg_icon">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-icon-facebook"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-twitter2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon--instagram"></use>
        </svg>
    </p>
   <div class="footer_con">
       <ul class="title col-md-12 col-sm-12 col-xs-12">
           <li class="col-md-3 col-sm-6 col-xs-6">careers</li>
           <li class="col-md-3 col-sm-6 col-xs-6">how it works</li>
           <li class="col-md-3 col-sm-6 col-xs-6">health</li>
           <li class="col-md-3 col-sm-6 col-xs-6">gifts</li>
           <li class="col-md-3 col-sm-6 col-xs-6">wholesale</li>
           <li class="col-md-3 col-sm-6 col-xs-6">in stores</li>
           <li class="col-md-3 col-sm-6 col-xs-6">help</li>
       </ul>
       <ul class="des col-md-10 col-sm-11 col-xs-11 col-md-offset-2 col-sm-offset-1 col-xs-offset-1">
           <li><a>terms</a></li>
           <li><a>privacy</a></li>
           <li><a>cookies</a></li>
           <li><a>modern slavery statement</a></li>
           <li><a>students</a></li>
           <li><a>get in touch</a></li>
           <li><a>press</a></li>
           <li><a>grazelabs.com</a></li>
       </ul>
       <p class="col-md-12 col-sm-12 col-xs-12">© 2020 nature delivered ltd</p>
   </div>
</footer>
    <div class="footer_color col-md-12 col-sm-12 col-xs-12">
        <!--        <img src="images/download.svg" alt="">-->
        <span></span>
    </div>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>